<template>
  <div>
    <el-row justify="center" :gutter="20">
      <el-col :span="24" style="margin-top: 12px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单快捷查询</span>
          </div>
          <div>
            <el-form inline :model="laneFilterFields">
              <el-form-item label="车道类型">
                <el-input v-model="laneFilterFields.laneType" placeholder="车道类型"></el-input>
              </el-form-item>
              <el-form-item label="编号">
                <el-input v-model="laneFilterFields.laneNo" placeholder="机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="LaneName" label="车道名称">
              <template slot-scope="scope">
                车道-{{ scope.row.LaneName }}
              </template>
            </el-table-column>
            <el-table-column prop="MachNo" label="机号"></el-table-column>
            <el-table-column prop="MachIp" label="IP地址"></el-table-column>
            <el-table-column prop="InOutFlg" label="进出">
              <template slot-scope="scope">
                <span v-if="scope.row.InOutFlg === 'IN'" style="color: #5d7cd4">进口</span>
                <span v-else-if="scope.row.InOutFlg === 'OUT'" style="color: #3ecf43">出口</span>
              </template>
            </el-table-column>
            <el-table-column prop="MachStatus" label="设备状态">
              <template slot-scope="scope">
                <span v-if="scope.row.MachStatus === '在线状态'" style="color: #3dcb84; font-weight: bold;">在线</span>
                <span v-else-if="scope.row.MachStatus === '已断线'" style="color: #434646; font-weight: bold;">离线</span>
              </template>
            </el-table-column>
            <el-table-column prop="LaneCode" label="二维码">
              <template slot-scope="scope">
                <img :src="strDeal(scope.row.LaneCode, scope.row.MachNo)" style="width: 110px; height: 110px;">
              </template>
            </el-table-column>
            <!--
                        <el-table-column fixed="right" label="操作" width="100">
                          <template slot-scope="scope">
                            <el-button @click="clickToIP(scope.row.SecDvIp)" type="text" size="small">管理</el-button>

              </template>
            </el-table-column>
            -->
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "lane",
  data: () => ({
    laneFilterFields: {
      laneName: "",
      laneType: "",
      laneNo: "",
    },
    tableData: []
  }),
  methods: {
    reqListLane() {
      axios.get("http://218.75.78.171:9082/api/bo/lane", {
        params: {}
      }).then(resp => {
        let {data: {status_code, data: {LaneInfo}}} = resp
        if (LaneInfo instanceof Array) {
          this.tableData = LaneInfo
        } else {
          this.tableData = [LaneInfo]
        }
      })
    },
    strDeal(str, no) {
      let num = str.indexOf('messageStr=')
      let returnStr = str.substr(0, num + 11)
      return returnStr + 'MachNo ' + no
    },
    clickToIP(url) {
      console.log(url)
      window.open(`http://${url}`, '_blank')
    }
  },
  created() {
    this.reqListLane()
  }
}
</script>

<style scoped>

</style>
